.lf-control-upload {

  .lf-icon {
    max-width: 20px;
    max-height: 20px;
  }

  .MuiButton-sizeLarge {
    .lf-icon {
      max-width: 22px;
      max-height: 22px;
    }
  }

  .MuiButton-sizeSmall {
    .lf-icon {
      max-width: 18px;
      max-height: 18px;
    }
  }

  .lf-upload-button-layout {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-content: stretch;
    align-items: center;

    .lf-upload-button-left {
      order: 0;
      flex: 0 0 auto;
      align-self: auto;
    }

    .lf-upload-button-right {
      order: 0;
      flex: 1 0;
      overflow: hidden;
      align-self: auto;
      margin-left: var(--lf-field-margin);
    }
  }

  .lf-upload-file-list {
    margin-top: 10px;
    font-family: "Roboto","Helvetica","Arial",sans-serif;

    .lf-upload-file-item {
      padding: 4px 0px;

      &:hover {
        background-color: #eeeeee;
      }
    }
  }

  .lf-upload-file-item {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-content: stretch;
    align-items: center;

    .lf-attachment-icon {
      flex: 0 0;
      align-self: auto;
      margin-right: 5px;
    }

    .lf-clear-button {
      flex: 0 0;
      align-self: auto;
      margin-left: 5px;
      margin-right: 5px;
      font-size: 1px; // or breaks aligment
    }

    .lf-name {
      flex: 1 0;
      align-self: auto;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .lf-size {
      flex: 0 0 auto;
      align-self: auto;
      margin-left: 5px;
      color: #888888;
    }
  }

  .lf-upload-file-name {

    .lf-size {
      color: #888888;
    }
  }
}
